<template>
	<view class="login_main">
		<!-- <view class="login_bg1"></view> -->
		<!-- <view class="login_bg2"></view> -->
		<!-- <view class="lolgin_top">
			<font class="t20">注册</font>
			<font class=" t11">欢迎回来</font>
		</view> -->
		<view class="login_main_main" scroll-y="true">
			<view class="login_main_main_logo">
				<image src="../../static/img/logo.png"></image>
			</view>
			<view class="login_main_li">
				<image src="../../static/img/user.png" class="login_main_li_img"></image>
				<input type="number" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请输入手机号"
					v-model="tel" />
			</view>
			<!-- <view class="login_main_li">
				<image src="../../static/img/yzm.png" class="login_main_li_img"></image>
				<input type="number" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请输入验证码"
					style="width: 38%;" v-model="yzm" />
				<view class="login_main_li_yzm t9" @click="yzmf()">{{yzmtext}}</view>
			</view> -->
			<view class="login_main_li">
				<image src="../../static/img/pwd.png" class="login_main_li_img"></image>
				<input type="text" password="true" class="login_main_li_inp  t22" placeholder-class="t8"
					placeholder="请输入密码" v-model="pwd" />
			</view>
			<view class="login_main_li">
				<image src="../../static/img/pwd.png" class="login_main_li_img"></image>
				<input type="text" password="true" class="login_main_li_inp  t22" placeholder-class="t8"
					placeholder="请再次输入密码" v-model="pwds" />
			</view>
			<!-- <view class="login_main_li">
				<image src="../../static/img/yqm.png" class="login_main_li_img"></image>
				<input type="text" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请输入接点人手机号" v-model="inv"  @input="numabc"/>
			</view> -->
			<view class="login_main_li">
				<image src="../../static/img/yqm.png" class="login_main_li_img"></image>
				<input type="number" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请输入推荐人手机号" :disabled="tjrDisabled" v-model="tjrPhone"  @input="tjrPhoneChange"/>
			</view>
			<view class="login_main_li">
				<image src="../../static/img/pwd.png" class="login_main_li_img"></image>
				<input type="text" password="true" class="login_main_li_inp  t22" placeholder-class="t8"
					placeholder="请输入支付密码" v-model="securityCode" />
			</view>
			<view class="login_main_li">
				<image src="../../static/img/pwd.png" class="login_main_li_img"></image>
				<input type="text" password="true" class="login_main_li_inp  t22" placeholder-class="t8"
					placeholder="请确认支付密码" v-model="securityCodeConfirm" />
			</view>
			<view class="login_main_li" @click="openAddress">
				<image src="../../static/location.png" class="login_main_loca_img"></image>
				<!-- <input type="text" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="输入推荐人手机号获取地址" disabled v-model="alladdress" /> -->
				<input type="text" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请选择地址" disabled
					v-model="alladdress"  />
			</view>
			<!-- <view class="login_main_li">
				<image src="../../static/location.png" class="login_main_loca_img"></image>
				<input type="text" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请选择街道" disabled @click="openStreet" v-model="streeName"/>
			</view> -->
			<!-- <view class="login_main_li">
				<image src="../../static/location.png" class="login_main_loca_img"></image>
				<input type="text" class="login_main_li_inp  t22" placeholder-class="t8" placeholder="请输入社区引流站点" v-model="btAddress"/>
			</view> -->
			<!-- <view class="baodan_zhu t1">
				<view class="baodan_tit t1">身份证人像面照片</view>
				<view class="uni-padding-wrap uni-common-mt baodan_into" @click="fchooseImage">
					<block v-if="fimage">
						<image :src="fimage" class="image baodan_into_image" mode="widthFix"></image>
					</block>
				</view>
			</view> -->
<!-- 			<view class="baodan_zhu t1">
				<view class="baodan_tit t1">身份证国徽面照片</view>
				<view class="uni-padding-wrap uni-common-mt baodan_into" @click="fchooseImage1">
					<block v-if="fimage1">
						<image :src="fimage1" class="image baodan_into_image" mode="widthFix"></image>
					</block>
				</view>
			</view> -->
			<view class="login_main_zhu">
				<checkbox-group @change="readChange">
					<label>
						<checkbox value="agree" :checked="read" />
					</label>
					<span>我已阅读并同意<span @click="readAgree('user')" style="color: blue;">用户协议</span>和<span @click="readAgree('yin')" style="color: blue;">隐私协议</span></span>
				</checkbox-group>
			</view>
			<view class="login_main_zhu">
				<view class="login_main_wangji t5" @click="denglu()">已有账号，去登录</view>
			</view>
			<button class="login_main_but t9" @click="zhuce()">注册</button>
		</view>
		<!-- 街道选择 -->
		<u-select v-model="streetShow" :list="streetList" value-name="id" label-name="shortName" @confirm="streetConfirm"></u-select>
		<con-address ref="addressPopup" @confirm="addressCheck"></con-address>
	</view>
</template>

<script>
	
	import {getTjrAddress,getStreetByArea} from '@/common/user.js';
	export default {
		data() {
			return {
				read: false,
				// href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				securityCodeConfirm:'',
				securityCode:'',
				tel: '',
				yzm: '',
				pwd: '',
				pwds: '',
				inv: '',
				tjrPhone: '',
				checks: true,
				yzmche: true,
				yzmtext: '验证码',
				aliId: '',
				wechatId: '',
				plat: 1,
				mdxxdz: '',
				provinceId: '',
				cityId: '',
				areaId: '',
				streetId: '',
				diqu: '',
				fimage: '',
				fimage1: '',
				publishState: 2,
				btAddress: '',
				alladdress: '',
				streeName: '',
				streeId: '',
				streetList: [],
				streetShow: false,
				address: "",
				tjrDisabled: false
			}
		},
		onLoad(params) {
			// params = {
			// 	phone: "18888888888"
			// }
			if(params && params.phone){
				this.tjrPhone = params.phone;
				this.tjrDisabled = true;
			}
			
		},
		methods: {
			readChange(val){
				console.log("val ",val );
				if(val.detail.value[0] == "agree"){
					this.read = true;
				}else{
					this.read = false;
				}
			},
			// 打开地区选择器
			openAddress(){
				this.$nextTick(function(){
					if(this.address.length > 0){
						this.$refs.addressPopup.open(false);
					}else{
						this.$refs.addressPopup.open(true);
					}
				})
			},
			// 地址选择
			addressCheck(province,city,area,street){
				console.log(province,city,area,street);
				this.provinceId = province.id;
				this.cityId = city.id;
				this.areaId = area.id;
				this.streetId = street.id;
				this.streeName = street.name;
				this.alladdress = province.name + city.name + area.name + street.name;
			},
			// 打开街道选择器
			openStreet(){
				if(!this.$u.test.mobile(this.tjrPhone)){
					this.$common.toast("请输入正确的推荐人手机号");
					return;
				}
				if(this.$u.test.isEmpty(this.streetList)){
					this.$common.toast("没有获取到对应的街道列表");
					return;
				}
				this.streetShow = true;
			},
			// 推荐人手机号到达11位就获取地址位置
			tjrPhoneChange(e){
				// console.log(this.$u.test.mobile(e.target.value));
				// let phone = e.target.value;
				// if(this.$u.test.mobile(phone)){
				// 	this.getTjrAddressFun(phone);
				// }
			},
			// 获取推荐人所属地区以及下属街道
			async getTjrAddressFun(phone){
				let addressResult = await getTjrAddress(phone);//15865799744
				console.log("addressResult",addressResult);
				this.provinceId = addressResult.provinceId;
				this.cityId = addressResult.cityId;
				this.areaId = addressResult.areaId;
				this.alladdress = addressResult.provinceName + addressResult.cityName + addressResult.areaName;
				
				this.streetList = await getStreetByArea(addressResult.areaId,phone);
				console.log("streetList",this.streetList);
			},
			// 街道选择
			streetConfirm(street){
				console.log(street);
				this.streeName = street[0].label;
				this.streetId = street[0].value;
			},
			readAgree(){
				uni.previewImage({
					urls: ['http://zcmall01.vworld365.com/protocol/用户协议.jpg'],
					success: () => {
						console.log("预览成功");
					},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
			denglu() {
				uni.navigateTo({
					url: '/pages/denglu/denglu'
				});
			},
			zhuce() {
				if (this.checks === false) {
					return false
				}
				console.log("this.read",this.read);
				if (this.read == false) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				var reg = /^[1]([3-9])[0-9]{9}$/
				if (!(reg.test(this.tel))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				// if (!this.yzm) {
				// 	uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false
				// }
				if (!this.pwd) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (this.pwds != this.pwd) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (!this.securityCode) {
					uni.showToast({
						title: '请输入支付密码',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (this.securityCode != this.securityCodeConfirm) {
					uni.showToast({
						title: '支付密码输入不一致',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (!this.tjrPhone) {
					uni.showToast({
						title: '请输入推荐人手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				
				// if(!this.fimage){
				// 	uni.showToast({
				// 		title: '请上传身份证正面',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false
				// }

				this.checks = false

				uni.showLoading(); 
				console.log("this.fimage",this.fimage);
				uni.request({
					header: {
						'content-type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mallApiGt/user/register', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						aliId: this.aliId,//	阿里ID		false							string
						password: this.pwd,//	密码		false							string
						securityCode: this.securityCode,//	密码		false							string
						phone: this.tel,//	手机号		false							string
						plat: this.plat,//	平台		true							integer
						verificationCode: this.yzm,//	验证码		false							string
						wechatId: this.wechatId,//	微信ID		false							string
						tjrPhone: this.tjrPhone,
						yqrPhone:this.inv,
						province:this.provinceId,
						city:this.cityId,
						area:this.areaId,
						street:this.streetId,
						address: this.btAddress,
						sfzzm:this.fimage,
						sfzfm:''
					},
					success: (res) => {
						console.log("ressss",res);
						uni.hideLoading(); //关闭加载动画
						this.checks = true
						if (res.data.status == 200) {

							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 2000
							});
							uni.setStorage({
								key:'inviter',
								data:this.inv
							})
							setTimeout(function() {
								uni.navigateBack();
							}, 2000)

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}


					},
					fail: (error) => {
						uni.hideLoading(); //关闭加载动画
						this.checks = true
						console.log(error)
					}
				});
			},
			// 倒计时
			Downtime(countime) {

				this.yzmche = false
				if (countime == 0) {
					// 获取验证码
					this.yzmche = true
					this.yzmtext = '验证码'
					return false
				}
				let _this = this
				setTimeout(function() {
					countime--
					_this.yzmtext = '获取' + countime
					_this.Downtime(countime)
				}, 1000)
			},
			yzmf() {
				// this.yzmche=false;

				if (this.yzmche === false) {
					return false
				}
				var reg = /^[1]([3-9])[0-9]{9}$/
				if (!(reg.test(this.tel))) {

					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					});
					this.yzmche = true;
					return false
				}
				this.Downtime(60);
				uni.request({
					header: {
						'content-type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'user/sendVerificationCode/'+this.tel, //仅为示例，并非真实接口地址。
					method: 'POST',
					// data: {
					// 	phone: this.tel
					// },
					success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title: '发送验证码成功',
								icon: 'success',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						this.yzmche = true
						console.log(error)
					}
				});
			},
			
			fchooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						_this.fimage = tempFilePaths[0];
						var uploadTask = uni.uploadFile({
							url: getApp().globalData.url + 'file/uploadThird',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								// 'files':tempFilePaths[i],
							},
							success: function(uploadFileRes) {
								var datamain = JSON.parse(uploadFileRes.data);
								console.log(datamain);
								if (datamain.status == 200) {
									var url = datamain.data.domain + datamain.data.localPath;
									_this.fimage = url;
									_this.mainPicId = datamain.data.id;
									console.log(url);
									console.log("_this.fimage",_this.fimage);
								} else {
									uni.showToast({
										title: datamain.msg,
										icon: 'none',
										duration: 1000
									})
								}
							}
						});
					},
					error: function(e) {
						console.log(e);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 1000
						})
					}
				});
			
			},
			fchooseImage1: function() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						_this.fimage1 = tempFilePaths[0];
						var uploadTask = uni.uploadFile({
							url: getApp().globalData.url + 'file/uploadThird',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								// 'files':tempFilePaths[i],
							},
							success: function(uploadFileRes) {
								var datamain = JSON.parse(uploadFileRes.data);
								console.log(datamain);
								if (datamain.status == 200) {
									var url = datamain.data.domain + datamain.data.localPath;
									_this.fimage1 = url;
									_this.secondPicId = datamain.data.id;
									console.log(url);
								} else {
									uni.showToast({
										title: datamain.msg,
										icon: 'none',
										duration: 1000
									})
								}
							}
						});
					},
					error: function(e) {
						console.log(e);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 1000
						})
					}
				});
			
			},
			//获取发布状态
			getPublishState() {
				uni.getSystemInfo({
					success: (res) => {
						let brand = "";
						try{
							let brand  = res.brand.toLowerCase()
						}catch(e){
							//TODO handle the exception
							brand = "xiaomi"
						}
						let id = 1453982355387654100
						switch (brand){
							case 'xiaomi':
								id = 1456871784196436000;
								break;
							case 'huawei':
								id = 1456869585609388000;
								break;
							case 'vivo':
								id = 1456872496989040600;
								break;
							case 'oppo':
								id = 1456872951546736600;
								break;
							default:
								break;
						}
						uni.request({
							header: {
								"Content-Type": "application/x-www-form-urlencoded", //自定义请求头信息
							},
							url: getApp().globalData.url + 'admin/user/getAppletId/' + id,
							data: {
								id: id
							},
							method: 'POST',
							success: (res) => {
								console.log("app发布状态: ", res);
								this.publishState = res.data.data.state
							}
						})
					}
				})
			},
			
			
		}
	}
</script>

<style>
	.login_main {

		width: 100%;
		height: auto;
		/* min-height: 100vh; */
		/* max-height: 220vw; */
		display: block;
		float: left;
		background: -webkit-linear-gradient(67deg,#999,#fff, #c5c4c5);
		background: -o-linear-gradient(67deg,#999, #fff, #c5c4c5);
		background: -moz-linear-gradient(67deg, #ddd,#fff, #c5c4c5);
		background: linear-gradient(67deg,#999, #fff, #c5c4c5);
		background-size: auto 100%;
	}
	
	.login_main_loca_img{
		width: 5.8vw;
		height: 6vw;
		display: block;
		float: left;
		margin: 4vw 6vw;
	}

	.login_main_main {
		width: 80%;
		height: auto;
		display: block;
		float: left;
		margin: 0 10%;
		background: #FFFFFF;
		border-radius: 7vw;
		z-index: 99;
		/* position: fixed; */
		/* top: 10vw; */
		padding: 10vw 0;
	}

	.login_main_main_logo {
		width: 17vw;
		height: 17vw;
		display: block;
		float: left;
		border-radius: 4vw;
		overflow: hidden;
		margin: 15.2vw 31.5vw;
		margin-bottom: 4vw;
	}

	.login_main_main_logo image {
		width: 17vw;
		height: 17vw;
		display: block;
		float: left;
	}

	.login_main_li {
		width: 64.8vw;
		height: 13.6vw;
		display: block;
		float: left;
		margin: 2vw 7.6vw;
		border: 1px solid #CFCFCF;
		border-radius: 6.8vw;
	}

	.login_main_li_img {
		width: 4.8vw;
		height: 5.3vw;
		display: block;
		float: left;
		margin: 4vw 6.5vw;
	}

	.login_main_li_inp {
		width: 42.2vw;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		margin-top: 2.8vw;
	}

	.login_main_zhu {
		width: 100%;
		height: 8vw;
		line-height: 8vw;
		display: flex;
		justify-content: center;
		float: left;
		margin: 1vw 0;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.login_main_zhuce {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
	}

	.login_main_wangji {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: right;
	}

	.login_main_but {
		width: 64.8vw;
		height: 13vw;
		display: block;
		float: left;
		margin: 2vw 7.6vw;
		line-height: 13vw;
		text-align: center;
		background: #f1c75e;
		border-radius: 6.5vw;
		background-size: 100%;
	}

	.login_main_li_yzm {
		width: auto;
		height: 8vw;
		display: block;
		float: right;
		margin-right: 3vw;
		background: #fcbe16;
		padding: 0 3vw;
		line-height: 8vw;
		border-radius: 4vw;
		margin-top: 2.5vw;
	}

	.act {
		background: #f1c75e;
	}

	.login_bg1 {
		width: 50vw;
		height: 50vw;
		border-radius: 50%;
		/* position: fixed; */
		background: #F1C75E;
		left: -10vw;
		bottom: -15vw;
		z-index: 1;
	}

	.login_bg2 {
		width: 120vw;
		height: 200vw;
		border-radius: 50%;
		/* position: fixed; */
		background: #F1C75E;
		right: -40vw;
		top: -60vw;
		z-index: 1;
		opacity: 0.5;
	}

	.lolgin_top {
		width: auto;
		height: auto;
		position: fixed;
		top: 20vw;
		left: 10vw;
	}

	.lolgin_top font {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}
	
	.shuru {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		border-radius: 1vw;
		overflow: hidden;
		padding: 2vw 4vw;
		background: #fff;
		margin-top: 4vw;
		box-shadow: 0px 0px 5px #F2F2F2;
	}
	
	.shuru_tit {
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
	}
	
	.shuru_text {
		width: 55%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: right;
		text-align: right;
	}
	
	select.shuru_text {
		border: none;
	}
	
	.shuru_text2 {
		background: url(../../static/img/turn.png) no-repeat right center;
		background-size: 2.5vw;
		line-height: 6vw;
		text-align: right;
		padding: 2vw 0;
		padding-right: 4vw;
	}
	
	.baodan_zhu {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			margin: 2vw 0;
			background: #fff;
			border-radius: 1vw;
			padding: 4vw;
			box-shadow: 0px 0px 5px #eee;
			margin-top: 4vw;
		}
	
		.baodan_tit {
			width: 100%;
			height: 8vw;
			line-height: 8vw;
			display: block;
			float: left;
			text-align: center;
		}
	
		.baodan_into {
			width: 100%;
			height: auto;
			display: block;
			float: left;
			line-height: 7vw;
			display: block;
			float: left;
			min-height: 40vw;
			background: url(../../static/img/jiaa.png) no-repeat center;
		}
	
		.baodan_into_image {
			width: 90%;
			height: auto;
			display: block;
			float: left;
			margin: 0 5%;
		}
	
		.shuru_text1 {
			width: 100%;
			height: 10vw;
			line-height: 10vw;
			display: block;
			float: left;
		}
	
		/* 	.shuru_text2 {
			background: url(../../static/img/turn.png) no-repeat right center;
			background-size: 3vw;
			line-height: 10vw;
			text-align: right;
			padding-right: 4vw;
			height: 10vw;
			overflow: hidden;
		}
	*/
		.baodan_into_image_load {
			width: 20vw;
			height: 20vw;
			position: absolute;
			top: 12vw;
			left: 50%;
			z-index: 999;
			background: #000;
			padding: 7vw;
			border-radius: 3vw;
			margin-left: -10vw;
		}
		.hint-addr{
			margin-left: 30upx;
			font-size: 26upx;
			color:#333;
		}
</style>
